<template>
	<!-- 账户页面的中间部分，显示每个账户分类下的账户 -->
	<view class="account-card-container">
		<!-- 上边盒子 -->
		<view class="title-container">
			<view class="title-content-container" @click="changeShowAccountFlag">
				<view class="left-title">{{name}}</view>
				<view class="right-container">
					<view :class="['account-right-money', {'green-color': money >= 0}, {'red-color': money < 0}]">余额 {{showFlag ? money : secret}}</view>
					<view :class="['account-icon', 'iconfont', 'icon-icon_on_the_down', {'rotate' : showAccountFlag}, {'no-rotate' : !showAccountFlag}]"></view>
				</view>
			</view>
			<template  v-if="showAccountFlag && accountList && accountList.length > 0">
				<u-swipe-action style="width: 100%;">
					<u-swipe-action-item :options="options" @click="selectAccount(arguments, item, index)" v-for="(item, index) in accountList" :key="index">
					<!-- 展开后的盒子 -->
						<view class="account-content-container">
						<!-- <view class="account-content-container" v-for="(item, index) in cardList" :key="index" @click="selectAccount(item, index)"> -->
							<view class="left-icon-name-endNum-container">
								<view :class="['left-icon', 'iconfont', item.icon]" :style="{color: item.iconColor}"></view>
								<view class="left-name">{{item.name}}</view>
								<view class="left-endNum">{{item.lastFourDigitsOfCard}}</view>
							</view>
							<view class="right-money-container">{{showFlag ? item.money : secret}}</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</template>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			money: {
				type: Number, 
			},
			name: {
				type: String,
				default: "",
			},
			showFlag: {										// 是否显示金额
				type: Boolean,
				default: true,
			},
			accountObj: {
				type: Object,
				default: () => {},
			},
			accountList: {
				type: Array,
				default: () => [],
			}
		},
		data() {
			return {
				showAccountFlag: true,						// 展示分类
				cardList: [],					 			// 测试使用具体账户
				touchNum: 0,								// 点击的次数
				options: [
					// {
					// 	name: 'edit',
					// 	text: '编辑',
					// 	style: {
					// 		backgroundColor: '#463f84',
					// 	}
					// },
					// {
					// 	name: 'delete',
					// 	text: '删除',
					// 	style: {
					// 		backgroundColor: 'red',
					// 	}
					// },
					{
						name: 'edit',
						text: '编辑',
						style: {
							backgroundColor: '#463f84',
							width: '40px',
							height: '40px',
							borderRadius: '100px',
							margin: '0 6px',
							fontSize: '12px'
						}
					},
					{
						name: 'delete',
						text: '删除',
						style: {
							backgroundColor: '#e1555e',
							width: '40px',
							height: '40px',
							borderRadius: '100px',
							margin: '0 6px',
							fontSize: '12px'
						}
					},
				],
			};
		},
		methods: {
			/** 间隔250ms中点击两次视为 双击
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			maskTouchend(item, index){
				this.touchNum++;
				setTimeout(()=>{
					if(this.touchNum == 1){
						console.log('单击')
					}
					if(this.touchNum >= 2){
						console.log('双击');
						this.$emit("doubleClick", item, index);
					}
					this.touchNum = 0
				},250)
			},
			/**
			 * 点击账户事件
			 * @param {Object} option 操作对象。判断name
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			selectAccount(option, item, index){
				this.$emit("operate", item, index, this.options[option[0].index]);
			},
			/**
			 * 修改是否展示
			 */
			changeShowAccountFlag() {
				this.showAccountFlag = !this.showAccountFlag;
			},
			/**
			 * 添加账户
			 */
			addAccount() {
				this.$emit("addAccount")
			}
		},
		mounted(){
			for (var i = 0; i < 5; i++) {
				var num = Math.ceil(Math.random() * this.accountArr[0].list.length) - 1;
				this.cardList.push({
					id: i + 1,
					name: '测试1',
					icon: this.accountArr[0].list[num].icon,
					color: this.accountArr[0].list[num].color,
					endNum: num + '231',
					money: '￥1234',
				})
			}
		},
	};
</script>
<style lang="scss">
	.account-card-container {
		width: 100%;
		min-height: 100rpx;
		font-size: 30rpx;
		margin-bottom: 40rpx;
		// 标题盒子
		.title-container {
			width: 100%;
			min-height: 90rpx;
			background-color: white;
			border-radius: 20rpx;
			line-height: 90rpx;
			// 边框阴影效果
			box-shadow: 0px 0px 2px #dfdede;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.title-content-container {
				padding: 0rpx 20rpx;
				width: 100%;
				box-sizing: border-box;
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left-title {
					width: 30%;
					height: 100%;
					color: $themePurpleColor;
					font-weight: 450;
				}

				.right-container {
					width: 50%;
					height: 90rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.account-right-money {
						margin-right: 20rpx;
					}
					
					.green-color {
						color: $themeGreenColor;
					}
					
					.red-color {
						color: $typefaceRedColor;
					}
					
					.account-icon {
						color: $themePurpleColor;
					}
				}
			}


			// 展开后的账户
			.account-content-container {
				padding: 0rpx 20rpx;
				width: 100%;
				height: 90rpx;
				box-sizing: border-box;
				border-top: 1px solid $themeBorderGreyColor;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left-icon-name-endNum-container {
					width: 60%;
					height: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.left-icon {
						font-size: 45rpx;
						width: 50rpx;
						height: 100%;
						line-height: 80rpx;
						margin-right: 15rpx;
					}

					.left-name{
						font-size: 30rpx;
						line-height: 80rpx;
						margin-right: 10rpx;
					}

					.left-endNum {
						font-size: 28rpx;
						color: $typefaceGreyColor;
						margin-right: 10rpx;
						line-height: 80rpx;
					}
				}

				.right-money-container {
					width: 20%;
					height: 100%;
					text-align: right;
					line-height: 80rpx;
				}
			}
		}

	}

	// 向下箭头的判断样式
	.rotate {
		transition: all .5s;
	}

	.no-rotate {
	    transform:rotate(-180deg);
		transition: all .5s;
	}
</style>
